<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta name="referrer" content="no-referrer">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <!-- <script type="text/javascript" src="layui/js/jquery-1.8.3.min.js"></script> -->
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
 <div>
 <!--  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
   <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
 	<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
	<input type="text" id="searchId" style="width:200px;float:left;height:30px;" placeholder="输入汽车编号查找" required="required" autocomplete="off" class="layui-input">
	<div class="layui-inline" style="height:29px; float: left;" title="搜索" lay-event="ID_SEARCH"><i class="layui-icon layui-icon-search"></i></div>
	
	<input type="text" id="firstPrice" style="width:200px;float:left;height:30px; margin-left: 35px;" required="required" placeholder="输入起始价格" autocomplete="off" class="layui-input">
	<div class="layui-inline" style="height:29px; float: left; margin-left: 1px;"><i>~</i></div>
	<input type="text" id="lastPrice" style="width:200px;float:left;height:30px;margin-left: 3px;" required="required" placeholder="输入终止价格" autocomplete="off" class="layui-input">
	<div class="layui-inline" style="height:29px; float: left;" title="搜索" lay-event="PRICE_SEARCH"><i class="layui-icon layui-icon-search"></i></div>
	
	
	<div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="LAYTABLE_SEARCH"><i class="layui-icon layui-icon-search"></i></div>
	<input type="text" id="searchTag" style="width:200px;float:right;height:30px;" placeholder="输入品牌查找(如：奥迪)" autocomplete="off" class="layui-input">
 </div>


</script>

	
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">租车</a>
  <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
</script>
              
          
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 

 
<script>
layui.use('table', function(){
  var table = layui.table,
	$ = layui.jquery;
	

  
  //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
  //详见：https://www.layui.com/doc/modules/table.html#totalRow
 tableResult = table.render({
	  //绑定哪个组件，通过id选择器,把数据返回给elem绑定id的组件
    elem: '#test'
	//请求数据路径
    ,url:'http://localhost:8085/admin/car/carList'	//绑定三个事件
    ,toolbar: '#toolbarDemo'
	//导出Excel的标题
    ,title: '课程表'
	//统计总和
    ,totalRow: true
    ,cols: [[
      {type: 'checkbox'}
      ,{field:'carId', title:'汽车编号', width:104, sort: true}
      ,{field:'carName', title:'汽车名称', width:219}
	  //totalRow: true 开启当前列总和
      ,{field:'dailyPrice', title:'每日租金', width:135,sort: true}
      ,{field:'imageUrl', title:'汽车图片', width:125, templet: '<div><img src="{{d.imageUrl}}"></div>'}
      ,{field:'brand', title:'汽车品牌', width:110}
	  ,{field:'productYear', title:'出厂年份', width:135}
	  ,{field:'productCountry', title:'出厂地', width:92}
	  ,{field:'color', title:'颜色', width:92}
      // ,{field:'createTime', title:'创建时间', width:190}
	   ,{title:'操作', toolbar: '#barDemo', width:100 }
	 
    ]]
    ,page: true
  });
  
 
  
  //工具栏事件
  table.on('toolbar(test)', function(obj){
	  //重要！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！下面两行
	 var page1 = obj.config.index;
	 var limit1 = obj.config.limit;
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      break;
	  case 'LAYTABLE_SEARCH':
	  //重载表格，就是用我们ajax异步请求的数据，更新到我们的表格当中
		tableResult.reload({
			url: 'http://localhost:8085/carInformation/getCarsByBrand',
			where: {
				brand: $('#searchTag').val()
			},
			page: true
			//自定义当前页和limit
			// {
			// 	curr: 1,
			// 	limit: 2
			// }
		})
		break;
		case 'ID_SEARCH':
		//重载表格，就是用我们ajax异步请求的数据，更新到我们的表格当中
				tableResult.reload({
					url: 'http://localhost:8085/carInformation/getCarById',
					where: {
						carId: $('#searchId').val()
					},
					//自定义当前页和limit
					// page: true
				})
				break;
				case 'PRICE_SEARCH':
				//重载表格，就是用我们ajax异步请求的数据，更新到我们的表格当中
						tableResult.reload({
							url: 'http://localhost:8085/carInformation/getCarByPriceSection',
							where: {
								firstPrice: $('#firstPrice').val(),
								lastPrice: $('#lastPrice').val()
							},
							//自定义当前页和limit
							// page: true
						})
						break;
    };
  });
  
  
  //监听工具条
    table.on('tool(test)', function(obj){
	 
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('确定删除该课程吗?', function(index){
			$.ajax({
				url: 'http://localhost:8085/admin/car/delete/'+data.carId,
				type:'DELETE',
				// data: {courseId: data.courseId},
				dataType:"json",
				timeout:300000,
				success:function(result) {
						if(result) {
							layer.msg("删除成功",{time: 1000},function(){
								table.reload('test',table);
							});
						}
					
				}
			});
        });
      } else if(obj.event === 'edit'){
		// layer.confirm('确定修改该项目吗?', function(index){
		// 	$.ajax({
		// 		url: 'http://localhost:8085/admin/car/updateCar',
		// 		type: 'POST',
		// 		data: JSON.stringify(data),
		// 		dataType:"json",
		// 		timeout:300000,
		// 		contentType: 'application/json; charset=UTF-8',
		// 		success:function(result) {
		// 				if(result) {
		// 					layer.msg("修改成功",{time: 1000},function(){
		// 						table.reload('test',table);
		// 					});
		// 				}
					
		// 		}
		// 	});
		// });
		 layer.open({
		        type: 2,
		        title: '租车订单',
		        shadeClose: false,
		        shade: 0.6,
		        area: ['550px', '500px'],
		        content: 'rental_car.html',
				success: function(layero,index) {
					var body = layer.getChildFrame('body',index);
					console.log(data.carId);
					// console.log(body.find('form'));
					body.find('#myform').find('#carId').attr('value',data.carId)
					body.find('#myform').find('#tmpCarDailyPrice').attr('value',data.dailyPrice)
				}
		    });
      }
    });
});
</script>

<style>

 .searchInput{
	 display: inline-block;
 }
.layui-table-cell{
            text-align:center;
            height:auto;
            white-space:normal;
        }

</style>
</body>
</html>
